<template>
  <!-- <div class="block" style="margin-top: 15px"> -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 15, 20, 25]"
    :page-size="pageSize"
    layout="total, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
  <!-- </div> -->
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, //当前页码
      total: 20, //总条数
      pageSize: 5, //每页的数据条数
      total: 10,
    };
  },
  mounted() {
    this.getlivestockInfo(1);
  },
  methods: {
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getlivestockInfo(val);
    },
    getlivestockInfo(num1) {
      let that = this;
      let params = new URLSearchParams();
      params.append("pageNum", num1);
      that.$axios
        .post("http://127.0.0.1:3000/queryUserData") //补上后台接口即可
        .then((response) => {
          // 请求成功
          console.log("请求成功");
          that.tableData = response.data.data;
          that.currentPage = num1; //设置当前是第几页
          that.pageSize = response.data.data.length; //设置多少条数据（并不是设置一页可查看多少条数据）
          that.total = response.data.data.length; //总共几条数据
        })
        .catch((error) => {
          // 请求失败
          console.log("请求失败");
          console.log(error);
        });
    },
  },
};
</script>
